<template>
  <!-- 用户管理 -->
  <div>
    <!-- 卡片 -->
    <el-card>
      <!-- 标题部分 -->
      <div slot="header" class="clearfix">
        <div class="clearfix_left">
          <i class="el-icon-arrow-left"></i>
          <h3>返回</h3>
        </div>
        <span>新增二级子类</span>
      </div>
      <!-- 基本资料 -->
      <div class="present">基本资料</div>
      <!-- form表单 -->
      <el-form size="medium" class="formzl" :label-position="labelPosition" label-width="80px" :model="formMess">
        <el-form-item label="会员Id:">
          <el-input v-model="formMess.id"></el-input>
        </el-form-item>
        <el-form-item label="昵称:">
          <el-input v-model="formMess.nc"></el-input>
        </el-form-item>
        <el-form-item label="密码:">
          <el-input type="password" v-model="formMess.passWord"></el-input>
        </el-form-item>
        <!-- 头像 -->
        <el-form-item label="头像:">
          <!-- 上传图片 -->
          <el-upload
            :file-list="fileList"
            class="upload-demo"
            :on-success="handleSuccess"
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            list-type="picture"
          >
            <div class="upload_btn">
              <i></i>
              <span>选择图片</span>
            </div>
          </el-upload>
        </el-form-item>
        <!-- 手机 -->
        <el-form-item label="手机号码:">
          <el-input v-model="formMess.tel"></el-input>
          <span>[更换手机]</span>
        </el-form-item>
        <!-- 性别 -->
        <el-form-item label="性别:">
          <el-input v-model="formMess.sex"></el-input>
        </el-form-item>
        <!-- 职业 -->
        <el-form-item label="职业:">
          <el-input v-model="formMess.vocation"></el-input>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item label="邮箱:">
          <el-input v-model="formMess.email"></el-input>
        </el-form-item>
        <!-- 地址 -->
        <el-form-item label="地址:">
          <el-input v-model="formMess.address"></el-input>
        </el-form-item>
        <!-- 管理员操作 -->
        <div class="present pre1">管理员操作</div>
        <!-- 是否禁用 -->
        <el-form-item label="是否禁用:">
          <el-radio-group v-model="radio">
            <el-radio :label="3">正常</el-radio>
            <el-radio :label="6">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
        radio: 2,
      fileList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        }
      ],
      labelPosition: "right",
      formMess: {
        id: "852465",
        nc: "八月的风",
        passWord: "123456",
        tx: "",
        tel: "1234567891",
        sex: "女",
        vocation: "失业",
        email: "",
        address: "",
        isjy: true,
        jf: "",
        vipdj: "",
        vipjz: ""
      }
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log(response);
    },
    handleExceed(files, fileList) {
      console.log(fies);
    }
  }
};
</script>

<style scoped>
.clearfix {
  text-align: center;
  font-size: 24px;
  font-weight: 400;
  color: #212121;
}
.clearfix_left {
  float: left;
  margin-left: 50px;
  color: #3f51b5;
}
h3 {
  font-size: 20px;
  font-weight: 400;
  text-align: left;
  display: inline;
}
i {
  width: 10px;
  height: 20px;
}
.present {
  margin-left: 80px;
}
.el-input {
  width: 160px;
  height: 36px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
.el-form {
  margin-top: 22px;
  margin-left: 80px;
}
.el-input__inner {
  height: 36px;
  text-align: left;
}

.el-form-item__label {
  font-size: 18px;
  color: #212121;
}
.upload_btn {
  background-color: #fff;
  width: 160px;
  height: 36px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.upload_btn i {
  width: 28px;
  height: 20px;
  background: url(../assets/img/photo.png) no-repeat;
  background-size: 28px 20px;
  margin: 0;
}
.upload_btn span {
  font-size: 16px;
  color: #757575;
  /* line-height: 47px; */
}
.upload_none {
  display: inline;
  margin-left: 10px;
}
.upload-demo {
  float: left;
}
.el-upload-list {
  width: 60px;
  height: 60px;
}
.el-form-item span {
  font-size: 16px;

  color: #757575;
}
.pre1 {
  margin: 0;
}
.el-radio__inner {
    width: 8px;
    height: 8px;
}
</style>